'use strict';
import React,{Component} from 'react';
import {
	Text,
	View,
    StyleSheet,
} from 'react-native';


class AirQuality extends Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
			<View style={AirQualityStyle.container}>
        <Text style={AirQualityStyle.aqiTitle}>
          空气质量
        </Text>
        <View style={AirQualityStyle.aqiContainer}>
          <View style={AirQualityStyle.subContainer}>
            <View style={AirQualityStyle.pointContainer}>
              <Text style={AirQualityStyle.point}>
                {this.props.aqi.city.aqi}
              </Text>
            </View>
            <Text style={AirQualityStyle.title}>
              AQI指数
            </Text>
          </View>
          <View style={AirQualityStyle.subContainer}>
            <View style={AirQualityStyle.pointContainer}>
              <Text style={AirQualityStyle.point}>
                {this.props.aqi.city.pm25}
              </Text>
            </View>
            <Text style={AirQualityStyle.title}>
              PM2.5指数
            </Text>
          </View>
        </View>
			</View>
    );
  }
}

const AirQualityStyle = StyleSheet.create({
    container: {
        marginTop: 20,
        backgroundColor: '#aa78d1dd',

    },
    aqiTitle: {
        marginTop: 10,
        textAlign: 'left',
        paddingLeft: 16,
        fontSize: 20,
        color: '#fff',
    },
    aqiContainer: {
        flexDirection: 'row',
        height: 120,
    },
    subContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
    },
    pointContainer:{
        flex: 2,
        alignItems: 'center',
        justifyContent: 'center',
    },
    point: {
        textAlign: 'center',
        fontSize: 30,
        color: '#fff',
    },
    title: {
        flex: 1,
        textAlign: 'center',
        fontSize: 16,
        color: '#fff',
    },
});
module.exports = AirQuality;
